import { View, Image, Button } from "@tarojs/components"
import Taro from '@tarojs/taro'
import NavBar from "../../components/topbar/topbar";
import { TaroCanvasDrawer } from 'taro-plugin-canvas';
import { useState } from "react"
import './shareCard.scss'
//import shouye from "../firstPage/image/shouye.png";

function shareCard() {

    const toBack = () => {
        Taro.navigateBack().then()
    }
        const [config,setconfig]=useState()
        const [shareImage,setshareImage]=useState()
        const [canvasStatus,setcanvasStatus]=useState(false)
        const [rssConfig,setrssConfig]=useState({
            width: 750,
            height: 750,
            backgroundColor: '#fff',
            debug: false,
            blocks: [
            {
                x: 0,
                y: 0,
                width: 750,
                height: 750,
                paddingLeft: 0,
                paddingRight: 0,
                borderWidth: 0,
                // borderColor: '#ccc',
                backgroundColor: '#EFF3F5',
                borderRadius: 0,
            }
            ],
            texts: [
            {
                x: 80,
                y: 420,
                text: '国产谍战 真人演出,《隐形守护者》凭什么成为Steam第一?',
                fontSize: 32,
                color: '#000',
                opacity: 1,
                baseLine: 'middle',
                lineHeight: 48,
                lineNum: 2,
                textAlign: 'left',
                width: 580,
                zIndex: 999,
            }
            ],
            images: [
            {
                url: '',
                width: 670,
                height: 320,
                y: 40,
                x: 40,
                borderRadius: 12,
                zIndex: 10,
                // borderRadius: 150,
                // borderWidth: 10,
                // borderColor: 'red',
            }
            ],
            lines: [
            {
                startY: 540,
                startX: 80,
                endX: 670,
                endY: 541,
                width: 1,
                color: '#eee',
            }
            ]
        })

        // 调用绘画 => canvasStatus 置为true、同时设置config
        /*canvasDrawFunc = (config = setrssConfig) => {
            this.setState({
            canvasStatus: true,
            config: config,
            })
            Taro.showLoading({
            title: '绘制中...'
            })
        }*/
        const canvasDrawFunc = (config = setrssConfig) =>{
            setcanvasStatus(true),
            setconfig(config)
            Taro.showLoading({
                title: '绘制中...'
                })
        }
        // 绘制成功回调函数 （必须实现）=> 接收绘制结果、重置 TaroCanvasDrawer 状态
        /*const onCreateSuccess = (result) => {
            const { tempFilePath, errMsg } = result;
            Taro.hideLoading();
            if (errMsg === 'canvasToTempFilePath:ok') {
            this.setState({
                shareImage: tempFilePath,
                // 重置 TaroCanvasDrawer 状态，方便下一次调用
                canvasStatus: false,
                config: null
            })
            } else {
            // 重置 TaroCanvasDrawer 状态，方便下一次调用
            this.setState({
                canvasStatus: false,
                config: null
            })
            Taro.showToast({ icon: 'none', title: errMsg || '出现错误' });
            console.log(errMsg);
            }
            // 预览
            // Taro.previewImage({
            //   current: tempFilePath,
            //   urls: [tempFilePath]
            // })
        }*/
        const onCreateSuccess = (result) =>{
            const { tempFilePath, errMsg } = result;
            Taro.hideLoading();
            if (errMsg === 'canvasToTempFilePath:ok')
            {
                setshareImage(tempFilePath)
                setcanvasStatus(false)
                setconfig(null)
            }else{
                setcanvasStatus(false)
                setconfig(null)
                Taro.showToast({ icon: 'none', title: errMsg || '出现错误' });
                console.log(errMsg);
            }
        }
        // 绘制失败回调函数 （必须实现）=> 接收绘制错误信息、重置 TaroCanvasDrawer 状态
        /*const onCreateFail = (error) => {
            Taro.hideLoading();
            // 重置 TaroCanvasDrawer 状态，方便下一次调用
            this.setState({
            canvasStatus: false,
            config: null
            })
            console.log(error);
        }*/
        const onCreateFail = (error) =>{
            Taro.hideLoading();
            setcanvasStatus(false)
            setconfig(null)
            console.log(error);
        }
        // 保存图片至本地
        const saveToAlbum = () => {
            const res = Taro.saveImageToPhotosAlbum({
            filePath: shareImage,
            });
            if (res.errMsg === 'saveImageToPhotosAlbum:ok') {
            Taro.showToast({
                title: '保存图片成功',
                icon: 'success',
                duration: 2000,
            });
            }
        }

    return(
        <View className='index'>
            <NavBar title="生成分享卡" back nback={toBack}/>
            <View>
                <View className='flex-row'>
                    <Button onClick={canvasDrawFunc (setrssConfig)}>绘制</Button>
                    <Button onClick={saveToAlbum}>保存到相册</Button>
                </View>
            </View>
            <View className='shareImage-cont'>
                <Image
                    className='shareImage'
                    src={shareImage}
                    mode='widthFix'
                    lazy-load
                />
                {
                    // 由于部分限制，目前组件通过状态的方式来动态加载
                    canvasStatus &&
                    (<TaroCanvasDrawer
                    config={config} // 绘制配置
                    onCreateSuccess={onCreateSuccess} // 绘制成功回调
                    onCreateFail={onCreateFail} // 绘制失败回调
                    />)
                }
            </View>
        </View>
    )
}
export default shareCard
            /*this.state = {
            // 绘图配置文件
            config: null,
            // 绘制的图片
            shareImage: null,
            // TaroCanvasDrawer 组件状态
            canvasStatus: false,
            rssConfig: {
                width: 750,
                height: 750,
                backgroundColor: '#fff',
                debug: false,
                blocks: [
                {
                    x: 0,
                    y: 0,
                    width: 750,
                    height: 750,
                    paddingLeft: 0,
                    paddingRight: 0,
                    borderWidth: 0,
                    // borderColor: '#ccc',
                    backgroundColor: '#EFF3F5',
                    borderRadius: 0,
                }
                ],
                texts: [
                {
                    x: 80,
                    y: 420,
                    text: '国产谍战 真人演出,《隐形守护者》凭什么成为Steam第一?',
                    fontSize: 32,
                    color: '#000',
                    opacity: 1,
                    baseLine: 'middle',
                    lineHeight: 48,
                    lineNum: 2,
                    textAlign: 'left',
                    width: 580,
                    zIndex: 999,
                }
                ],
                images: [
                {
                    url: 'http://pic.juncao.cc/rssfeed/images/demo.png',
                    width: 670,
                    height: 320,
                    y: 40,
                    x: 40,
                    borderRadius: 12,
                    zIndex: 10,
                    // borderRadius: 150,
                    // borderWidth: 10,
                    // borderColor: 'red',
                }
                ],
                lines: [
                {
                    startY: 540,
                    startX: 80,
                    endX: 670,
                    endY: 541,
                    width: 1,
                    color: '#eee',
                }
                ]
            }
            }
        }*/
